<!-- 商品列表组件 <good-list :list="xx"></good-list> -->
<template>
	<view >
<!-- 		<view :id="'good'+good.id" class="good-li" v-for="good in list" :key="good.id">
			<image class="good-img" :src="good.goodImg" mode="widthFix"/>
			<view class="flex-item">
				<view class="good-name">{{good.goodName}}</view>
				<text class="good-price">{{good.goodPrice}} 元</text>
				<text class="good-sold">已售{{good.goodSold}}件</text>
			</view>
		</view> -->
<!-- 		<view class="face-detail bg_0eb6ff rounded16 c-white">
			<view class="face-item">
				<view>
					<view class="ft20">账户余额(元)</view>
					<view>{{face}}</view>
				</view>
				<view class="text02 c_0eb6ff" @click="openQb">
					提现
				</view>
			</view>
		</view> -->
		<view class="tab-left" @click="openQb()">
		    <view class="myyu"></view>
		    <view class="left-rmb">
		      <view class="myqb"></view>
		    </view>
		   <view class="left-text">
				 <view class="text">
						 账户余额
				 </view>
				 <view class="text-mun">
						 {{face}}
				 </view>
		    </view>
		   <view class="left-right1" >
		       <view class="ectangle"></view>
		         <view class="text" >
		             提现
		         </view>
		    </view>
		</view>
		<view style="width: 100%;height: 10rpx;background-color: #F5F7FA;"></view>
		<view class="ft32 contace-top-item" style="border: none;"></view>
		<uni-collapse   v-model="accordionVal" @change="change">
			<view class="face_datil_main " :id="'good'+index"  style="" v-for="(item,index) in list" :key="index">
				<uni-collapse-item  :detail='item' :faceDetailBool='true' :border='false' titleBorder='none' :detailBool="false">
					<view class="content">
						<view class="partnetDetail-item" >
							{{item.describe}}
						</view>
						<view class="partnetDetail-item" v-if="!item.Qdetail">
							{{item.remark}}
						</view>
						<view class="partnetDetail-item" v-if="item.Qdetail" v-for="(item2,index2) in item.Qdetail" :key='index2'>
							{{item2}}
						</view>
					</view>
				</uni-collapse-item>
			</view>
		</uni-collapse>
	</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				default(){
					return []
				}
			},
			face:{
				type:String,
				default:""
			}
		},
		data(){
			return{
				accordionVal:"1"
			}
		},
		components:{
		},
		onLoad() {

		},
		methods:{
			change(e){
				
			},
			openQb(){
				uni.navigateTo({
					url: '/pages/my/withdrawal'
				});
			},
		}
	}
</script>

<style lang="scss">
	.tab-left{
      position: relative;
      display: flex;
			margin: 24rpx 32rpx 0rpx 32rpx;
      flex-direction: column;
			 .myyu{
					 width: 99%;
						 position: absolute;
					 height: 136rpx;
						background: url('@/static/myyu.png') no-repeat;
						background-size: 100% 136rpx;
			 }
			 .left-rmb{
					 position: relative;
					 top: 45rpx;
					 left: 20rpx;
						width: 40rpx;
					 .myqb{
							 width: 40rpx;
							 height: 40rpx;
							 background: url('@/static/myqb.png') no-repeat;
							 background-size: 40rpx 40rpx;
					 }
			 }
			 .left-text{
					 position: relative;
					 top: -20rpx;
					 left:80rpx;
					 width: 220rpx;
				 .text{
						 margin-bottom: 20rpx;
						 font-family: PingFang SC, PingFang SC;
						 font-weight: 400;
						 font-size: 26rpx;
						 color: rgba(255,255,255,0.5);
						 line-height: 30rpx;
						 text-align: left;
						 font-style: normal;
						 text-transform: none;
				 }
				 .text-mun{
						 font-family: D-DIN-DIN, D-DIN-DIN;
						 font-weight: bold;
						 font-size: 34rpx;
						 color: #FFFFFF;
						 line-height: 40rpx;
						 text-align: left;
						 font-style: normal;
						 text-transform: none;
				 }
				
		}
		   .left-right1{
		       width: 120rpx;
		         position: relative;
		         top: -95rpx;
		         left: 70%;
		         .ectangle{
		             position: absolute;
		             width: 116rpx;
		             height: 48rpx;
		             background: url('/static/Rectangle.png') no-repeat;
		             background-size:116rpx 48rpx ;
		         }
		         .text{
		               width: 116rpx;
		               position: relative;
		             font-family: PingFang SC, PingFang SC;
		             font-weight: 400;
		             font-size: 26rpx;
		             color: #8E6348;
		             line-height: 48rpx ;   
		             text-align: center;
		             font-style: normal;
		             text-transform: none;
		         }
		     }
	}
	.face-detail{
		width: 650rpx;
		margin: 30rpx auto 10rpx auto;
		max-width: 700px;
		padding: 30rpx 35rpx;
		// height: 136rpx;
		background: url('@/static/myyu.png') no-repeat;
		background-size: 100% 136rpx;
	}
	.face-detail .face-item{
		display: flex;
		justify-content: space-between;
		font-size: 58rpx;
	}
	.face-detail .face-item .text02{
		background: #fff;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		padding: 0rpx 18rpx;
		border-radius: 22rpx;
		font-size: 28rpx;
	}
	.face-detail .face-item:nth-child(2)
	{
	margin-top: 40rpx;
	}
	.table .item{
		height: 78rpx;
		line-height: 78rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 24rpx;
		color: #2d2d2d;
		display: flex;
	}
	.table .item:nth-of-type(2n-1) {
	    background-color: #fafafa;
	}
	.table-time{
		flex: 3;
/* 		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle; */
	}
	.table-cost{
		flex: 2;
		text-align: center;
	}
	.table-msg{
		flex:3;
		text-align: center;
/* 		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle; */
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; 
		text-overflow: ellipsis; 
		display: -webkit-box; 
		-webkit-line-clamp: 2; 
		line-clamp: 2; 
		-webkit-box-orient: vertical;
	}
	.table .item.tr{
	    color: #555;
	}
	.face_datil_main{
		border-bottom: 2rpx solid #F1F1F1;
		padding: 25rpx 20rpx;
		// display: flex;
		
		width: 95%;
		margin: 0 auto;
	}
	.face_detail_item{
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.face_detail_item + .face_detail_item{
		margin-top: 20rpx;
	}
	.c_D4D4D4{
		color: #afadae;
	}
	.ltqxcf{
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.partnetDetail-item + .partnetDetail-item{
		margin-top: 15rpx;
	}
	.content{
		margin-top: 20rpx;
	}
</style>
